<!-- 产能看板图表统计 -->
<template>
	<div id="statisChart">
		<div id="barChart"></div>
		<div id="pieChart"></div>
	</div>
</template>
<script setup name="statisChart">
	import * as echarts from 'echarts'
	import statisMediatorApi from '@/api/bi/dataBoard/production/statisMediatorApi'
	import { throttle } from 'lodash'

	// ===========================================DATA======================================================
	let barOptions = ref({
		title: {
			text: '各时点外呼工作量及接通率',
			textStyle: {
				fontSize: 14,
				fontWeight: 'bold'
			},
			left: 'center'
		},
		tooltip: {
			trigger: 'axis',
			formatter: (params) => {
				let res = params[0].name + '<br/>'
				params.forEach((item) => {
					res += `${item.marker}${item.seriesName}:${
						item.seriesType === 'line' ? `${item.value.toFixed(2)}%` : item.value.toFixed(0)
					}<br/>`
				})
				return res
			}
		},
		legend: {
			selectedMode: true,
			top: 30
		},
		yAxis: [
			{
				type: 'value'
			},
			{
				type: 'value',
				axisLabel: {
					formatter: (value) => {
						return `${value}%`
					}
				}
			}
		],
		grid: {
			top: 80,
			left: 40,
			right: 40
		},
		xAxis: {
			type: 'category',
			data: []
			// data: ['9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22']
		},
		series: []
	})
	let pieOptions = ref({
		title: {
			text: '通话时长占比',
			left: 'center',
			textStyle: {
				fontSize: 14,
				fontWeight: 'bold'
			}
		},
		tooltip: {
			trigger: 'item',
			formatter: function (params) {
				return `${params.name}: ${params.percent.toFixed(2)}%`
			}
		},
		legend: {
			left: 'center',
			top: 30
		},
		series: [
			{
				type: 'pie',
				radius: '50%',
				label: {
					show: true,
					formatter: function (params) {
						return `${params.name}: ${params.percent.toFixed(2)}%`
					}
				},
				data: []
			}
		]
	})
	let barDom
	let pieDom
	let barChart
	let pieChart
	let barLoading = ref(false)
	// ===========================================LIFECYCLE HOOKS===========================================
	// ===========================================METHODS==================================================
	const chartResize = throttle(() => {
		setTimeout(() => {
			barChart && barChart.resize()
			pieChart && pieChart.resize()
		}, 500)
	}, 200)
	// ===========================================REQUEST==================================================
	const getData = (data) => {
		getHourlyWorkload(data)
		getCallPercentage(data)
	}
	const getHourlyWorkload = (data) => {
		statisMediatorApi.getHourlyWorkload(data).then((res) => {
			let rawData = [[], [], []] //柱图数据
			let lineData = [[], []] //折线图数据
			let xData = []
			res.forEach((item) => {
				rawData[0].push(item.calloutNum)
				rawData[1].push(item.connectNum)
				rawData[2].push(item.effectDuration)
				lineData[0].push(item.rateConnect)
				lineData[1].push(item.effectConnect)
				xData.push(item.currentTime.slice(-2))
				barOptions.value.xAxis.data = xData
			})
			const totalData = []
			for (let i = 0; i < rawData[0].length; i++) {
				let sum = 0
				for (let j = 0; j < rawData.length; j++) {
					sum += rawData[j][i]
				}
				totalData.push(sum)
			}
			const series1 = ['拨打量', '接通量', '有效拨打量'].map((name, sid) => {
				return {
					name,
					type: 'bar',
					stack: 'total',
					barWidth: '60%',
					label: {
						show: true,
						formatter: (params) => {
							console.log('ppp', params)
							if (params.value <= 0) {
								return ''
							}
							return `${((params.value / totalData[params.dataIndex]) * 100).toFixed(0)}%`
						}
					},
					data: rawData[sid]
				}
			})

			const series2 = ['接通率', '有效接通率'].map((name, sid) => {
				return {
					name,
					type: 'line',
					yAxisIndex: 1,
					data: lineData[sid]
				}
			})
			barOptions.value.series = [...series1, ...series2]
			barDom = document.querySelector('#statisChart #barChart')
			barChart = echarts.init(barDom)
			barChart.setOption(barOptions.value)
			pieDom = document.querySelector('#statisChart #pieChart')
			pieChart = echarts.init(pieDom)
			pieChart.setOption(pieOptions.value)
			window.addEventListener('resize', chartResize)
		})
	}
	const getCallPercentage = (data) => {
		statisMediatorApi.getCallPercentage(data).then((res) => {
			pieOptions.value.series[0].data = [
				{ value: res[0].effectTen, name: '<10s' },
				{ value: res[0].effectThirty, name: '10s~30s' },
				{ value: res[0].effectSixty, name: '30s~60s' },
				{ value: res[0].effectMore, name: '>60s' },
				{ value: res[0].effectOther, name: '其它' }
			]
			pieDom = document.querySelector('#statisChart #pieChart')
			pieChart = echarts.init(pieDom)
			pieChart.setOption(pieOptions.value)
			window.addEventListener('resize', chartResize)
		})
	}
	defineExpose({
		getData
	})
</script>
<style lang="less" scoped>
	#statisChart {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 500px;
		#barChart {
			width: 65%;
			height: 100%;
		}
		#pieChart {
			flex: 1;
		}
	}
</style>
